<template>
    <div>
        <a-row>
            <a-col :span="24">
                <h1 style="font-size: 2.6em;">学生注册</h1>
            </a-col>
            <a-col :span="20">
                <a-form :form="form" @submit="handleSubmit" style="text-align: left">
                <a-form-item v-bind="formItemLayout" label="账号">
                        <a-input
                                v-decorator="[
                  'account',
                  {
                    rules: [{ required: true, message: '请输入注册账号' }],
                  },
                ]"
                                style="width: 100%"
                        >

                        </a-input>
                    </a-form-item>
                <a-form-item v-bind="formItemLayout" label="邮箱">
                    <a-input
                            v-decorator="[
                  'mail',
                  {
                    rules: [
                      {
                        type: 'email',
                        message: '请输入正确的邮箱格式',
                      },
                      {
                        required: true,
                        message: '请输入邮箱',
                      },
                    ],
                  },
                ]"
                    />
                </a-form-item>
                <a-form-item v-bind="formItemLayout">
                  <span slot="label">
                    昵称&nbsp;
                    <a-tooltip title="昵称会在排行榜中展示">
                      <a-icon type="question-circle-o" />
                    </a-tooltip>
                  </span>
                            <a-input
                                    v-decorator="[
                      'alias',
                      {
                        rules: [{ required: true, message: '请输入昵称', whitespace: true }],
                      },
                    ]"
                            />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="电话号码">
                        <a-input
                                v-decorator="[
                  'phoneNumber',
                  {
                    rules: [{ required: true, message: '请输入电话号码' }],
                  },
                ]"
                                style="width: 100%"
                        >

                        </a-input>
                    </a-form-item>
                <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
                    <a-input
                            v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码',
                      },
                      {
                        validator: validateToNextPassword,
                      },
                    ],
                  },
                ]"
                            type="password"
                    />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
                    <a-input
                            v-decorator="[
                  'confirm',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请再次输入密码确认',
                      },
                      {
                        validator: compareToFirstPassword,
                      },
                    ],
                  },
                ]"
                            type="password"
                            @blur="handleConfirmBlur"
                    />
                </a-form-item>

<!--                <a-form-item v-bind="tailFormItemLayout">-->
<!--                    <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">-->
<!--                        I have read the-->
<!--                        <a href="">-->
<!--                            agreement-->
<!--                        </a>-->
<!--                    </a-checkbox>-->
<!--                </a-form-item>-->
                <a-form-item v-bind="tailFormItemLayout" style="text-align: center; margin-bottom: 0">
                    <a-button type="primary" html-type="submit" style="width: 30%">
                        注册
                    </a-button>
                </a-form-item>
                <a-form-item v-bind="tailFormItemLayout" style="text-align: center;">
                    已有账号？
                    <router-link to="/login">登陆</router-link>
                </a-form-item>
            </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                confirmDirty: false,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'register' });
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$store.dispatch('login/register', values) // 调用注册接口
                            .then( data => {
                                
                                if(data.code === 0){
                                        this.$message.error(data.msg);
                                }else {
                                    this.$message.success('注册成功');
                                    this.$router.push('/login')
                                }
                            }).catch(()=>{
                            this.$message.error("网络异常")
                        })
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('两次输入的密码不一致！');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], { force: true });
                }
                callback();
            },
        },
    };
</script>